<template>
    <div class="">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">这是已经添加的单词</van-divider>

        <van-list v-model:loading="loadingWords" :finished="finishedWords" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item, index) in wordList" :key="index" :title="item.name + ' ' + item.definition">
                <van-button type="danger" size="mini" @click="deleteWord(index, item.id)">删除单词</van-button>
                <van-button type="primary" size="mini"
                    @click="showTargetWord = true; targetWord = item">查看详细信息</van-button>
            </van-cell>
        </van-list>

        <van-popup v-model:show="showTargetWord" round closeable close-icon="close">
            <p style="font-size: bold; color: red;">{{ targetWord.remark }}</p>
            <iframe :src="'https://mobile.youdao.com/dict?le=eng&q=' + targetWord.name"
                style="height: 900px;margin-top: 40px;">

            </iframe>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive} from 'vue';
// import { VanSearch, VanForm, VanField, VanButton, VanIcon, VanDropdownMenu, VanDropdownItem } from 'vant';
import axios from 'axios';
import { url } from '@/interface';
import { useRoute } from 'vue-router';

const routes = useRoute();

// 表单数据
const form = reactive({
    wordBookId: 12,
    name: '',
    definition: '',
    pronunciation: '',
    remark: ''
});
// 表单引用
const formRef = ref(null);

// 展示已经创建的单词
const showTargetWord = ref(false);
const finishedWords = ref(false);
const loadingWords = ref(false);
const wordList = ref([]);
const targetWord = ref({});
let page2 = 1;
const onLoad = () => {
    loadingWords.value = true;
    axios.get(url + "/word/getWordsByBookId", {
        params: {
            wordBookId: routes.params.id,
            page: page2
        }
    }).then(resp => {
        if (resp.data.length == 0) {
            finishedWords.value = true;
        } else {
            wordList.value = wordList.value.concat(resp.data);
        }
    }).finally(() => {
        loadingWords.value = false;
        page2 += 1;
    })
};

const deleteWord = (index, id) => {

    axios.delete(url + '/word/deleteById?id=' + id).then(resp => {
        wordList.value.splice(index, 1);
    })
}

</script>
<style scoped></style>
